<%--
  Created by IntelliJ IDEA.
  User: liuxi
  Date: 2018/6/8
  Time: 19:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery-3.2.1.min.js"></script>
</head>

<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1529058997363">
    <div style="position: relative; overflow: hidden; width: 1536px; height: 759px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
        <canvas data-zr-dom-id="zr_0" width="1920" height="948" style="position: absolute; left: 0px; top: 0px; width: 1536px; height: 759px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;">

        </canvas>
    </div>
    <div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 14px; font-family: &quot;Microsoft YaHei&quot;; line-height: 21px; padding: 5px; left: 151px; top: 296px;">Mon<br>
        <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#3398DB;">
        </span>直接访问: 10</div></div>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '坐标轴刻度与标签对齐';

    option = {
        color: ['#3398DB'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : [],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'就诊人数',
                type:'bar',
                barWidth: '60%',
                data:[]
            }
        ]
    };
    var total = [];
    var year = [];
    $.ajax({
        "url":'${pageContext.request.contextPath}/case/HalfYear',
        "type":"post",
        "dataType":"json",
        "success":function (data) {
            if(data){
                for(var i=0;i<data.HalfYear.length;i++){
                    total.push(data.HalfYear[i].total)
                }
                for(var i=0;i<data.HalfYear.length;i++){
                    year.push("2018-0"+data.HalfYear[i].year)
                }
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({
                    title:{
                            text:'就诊人数统计'
                        },
                    xAxis : [
                        {
                            data : year
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            data:total
                        }
                    ]
                })
            }
        }
    });
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>

</body>


</html>
